<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./node_modules/axios/dist/axios.min.js"></script>
    <script src="./lib/myAxios.js"></script>
</head>
<body>
    <button>get</button>
    <button>post</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
    btns[0].onclick = function(){
        // 1- xhr
        // const xhr = new XMLHttpRequest();
        // xhr.responseType = "json";
        // xhr.open("get","http://zhangpeiyue.com/scoreList?age=12");
        // xhr.send();
        // xhr.onload = function(){
        //     console.log(xhr.response);
        // }


        // 2- fetch
        // 2-1- fetch是window对象下的属性
        // console.log(window.fetch);

        // 2-2- 省略window
        // console.log(fetch);

        // 2-3- 发送请求
        // fetch("http://zhangpeiyue.com/scoreList?age=12");

        // 2-4- fetch得到的是一个promise实例
        // console.log(fetch("http://zhangpeiyue.com/scoreList?age=12"));

        // 2-5- 获取响应结果
        // fetch("http://zhangpeiyue.com/scoreList?age=12").then(value=>{
        //     // console.log(value.text());// 返回的是promise,可以将响应体转为文本
        //     // value.text().then(res=>{
        //     //     console.log(res);// 响应体数据，格式为文本
        //     // })
        //
        //     value.json().then(res=>{
        //         console.log(res);
        //     })
        // })

        {
            // 1
            // fetch("http://zhangpeiyue.com/scoreList?age=12")
            //     .then(value=>value.json())
            //     .then(res=>{
            //         console.log(res);
            //     })
        }
        {
            // 2
            // (async function(){
            //     const result = await fetch("http://zhangpeiyue.com/scoreList?age=12");
            //     const res = await result.json();
            //     console.log(res);
            // })();
        }
        {
            // myAxios({
            //     url:"http://zhangpeiyue.com/scoreList",
            //     params:{
            //         age:12
            //     }
            // }).then(value=>{
            //     console.log(value.data);// 响应体数据
            // })
        }
        {
            // myAxios.get("http://zhangpeiyue.com/scoreList",{
            //     params:{
            //         age:12
            //     }
            // }).then(({data})=>{
            //     console.log(data);
            // })
        }



    }

    btns[1].onclick = function(){
        // 1- xhr---> application/json
        // const xhr = new XMLHttpRequest();
        // xhr.responseType = "json";
        // xhr.open("post","http://zhangpeiyue.com/scoreList");
        // xhr.setRequestHeader("Content-Type","application/json");
        // xhr.send(JSON.stringify({
        //     userName:"刘德华",
        //     age:50
        // }));
        // xhr.onload = function(){
        //     console.log(xhr.response);
        // }

        // 2- "application/x-www-form-urlencoded
        // const xhr = new XMLHttpRequest();
        // xhr.responseType = "json";
        // xhr.open("post","http://zhangpeiyue.com/scoreList");
        // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        // xhr.send("userName=古巨基&age=12");
        // xhr.onload = function(){
        //     console.log(xhr.response);
        // }

        // 3- fetch ---> post-> application/json
        // fetch("http://zhangpeiyue.com/scoreList",{
        //     // 设置请求方式
        //     method:"post",
        //     // 设置请求头：相当于 xhr.setRequestHeader
        //     headers:{
        //         "Content-Type":"application/json"
        //     },
        //     // 设置请求体： xhr.send();
        //     body:JSON.stringify({
        //         userName:"古力娜扎",
        //         age:20
        //     })
        // }).then(async value=>{
        //     const result = await value.json();
        //     console.log(result);
        // })

        // fetch-> application/x-www-form-urlencoded
        // fetch("http://zhangpeiyue.com/scoreList",{
        //     // 设置请求方式
        //     method:"post",
        //     // 设置请求头：相当于 xhr.setRequestHeader
        //     headers:{
        //         "Content-Type":"application/x-www-form-urlencoded"
        //     },
        //     // 设置请求体： xhr.send();
        //     body:"userName=吉克隽逸&age=12"
        // }).then(async value=>{
        //     const result = await value.json();
        //     console.log(result);
        // })

        // 1- axios===>application/json
        // myAxios({
        //     method:"post",
        //     url:"http://zhangpeiyue.com/scoreList",
        //     data:{
        //         userName:"古天乐1",
        //         age:201
        //     }
        // }).then(value=>{
        //     console.log(value.data);
        // })

        // 2- axios==>urlencoded
        // myAxios({
        //     method:"post",
        //     url:"http://zhangpeiyue.com/scoreList",
        //     data:"userName=郑均1&age=131"
        // }).then(value=>{
        //     console.log(value.data);
        // })

        // application/json
        // myAxios.post("http://zhangpeiyue.com/scoreList",{
        //     userName:"金庸",
        //     age:80
        // }).then(value=>{
        //     console.log(value.data);
        // })

        // application/x-www-form-urlencoded
        myAxios.post("http://zhangpeiyue.com/scoreList","a=1&b=2").then(value=>{
            console.log(value.data);
        })

    }
</script>
</html>